<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2021-10-27 17:25:45
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-05-07 17:40:24
 * @FilePath: \code\cwp-front\pc-collaboration\src\components\atom\hide-opinion\index.vue
 * @Description: 意见隐藏
-->
<template>
  <div class="hide-opinion-content">
    <div :class="siderHideOption.mainClass">
      <a-checkbox @change="change" :checked="isHideOpinion" :class="siderHideOption.checkboxClass">{{
        $i18n('common.opinion.hidden.label')
      }}</a-checkbox>
      <div v-if="isHideOpinion" :class="siderHideOption.selectContent">
       <span v-if="isSiderHideOption"> {{ $i18n('collaboration.opinion.doNotInclude') }}</span>
       <span v-else> {{ $i18n('collaboration.opinion.doNotInclude') }}：</span>
        <a-tooltip :title="hideOpinionObject.text">
          <div class="track-people-select-container" @click="selectPeople" :class="siderHideOption.selectContainer">
            <div class="track-people-select">{{ hideOpinionObject.text }}</div>
            <icon-font type="cap-icon-xuanren" class="people-icon" />
          </div>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'pinia';
  import { useBaseInfoStore } from '@/store/modules/base-info';

  export default {
    name: 'HideOpinion',
    props: {
      isHideOpinion: {
        type: Boolean,
        default: false
      },
      hideOpinionObject: {
        type: Object
      },
      isSiderHideOption : {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapState(useBaseInfoStore, ['baseInfo']),
      siderHideOption() {
        const classObj = {
          mainClass: this.isSiderHideOption ? 'sider-hide-opinion':'hide-opinion',
          checkboxClass: this.isSiderHideOption ? 'checkbox-height': '',
          selectContent: this.isSiderHideOption ? 'sider-hide' : '',
          selectContainer: this.isSiderHideOption ? 'setting-flex':''
        }
        return classObj;
      }
    },
    methods: {
      //选中发送事件通知
      change(e) {
        this.$emit('update:isHideOpinion', e.target.checked);
      },
      //选人
      selectPeople() {
        const value = this.hideOpinionObject.value;
        console.log(value);

        //调用选人公共方法
        $.selectPeople({
          showBtn: false,
          params: {
            //名称, 应该可以不要
            // text: $('#hidTo' + commonId + ' #showToIdText').val(),
            //格式：Member|-4300287874074918893,Member|-8067040239322578063,
            value: value
              .split(',')
              .map((d) => `Member|${d}`)
              .join(',')
          },
          mode: 'open',
          accessFileSecretLevel: this.baseInfo.secretLevel.value,
          panels: 'OcipOrganization,Department,Team,Post,Outworker,RelatePeople,JoinOrganization',
          minSize: 0,
          selectType: 'Member',
          showFlowTypeRadio: false,
          callback: ({ text, obj }) => {
            this.$emit('update:hideOpinionObject', {
              text,
              value: obj.map((d) => d.id).join(',')
            });
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .hide-opinion-content {
    .hide-opinion {
      @include height(32);
  
      display: flex;
      align-items: center;
  
      > div {
        display: flex;
        align-items: center;
      }
    }
    .track-people-select-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 142px;
      height: 32px;
      padding: 0 10px;
      border-radius: 4px;
      border: $border2;
      background-color: #fff;
      cursor: pointer;

      &:hover {
        border-color: $c2;
        border-color: var(--theme-brand6, $c2);
      }

      > .track-people-select {
        @include ellipsis;
        width: 112px;
        color: #666;
      }

      > .people-icon {
        color: #1890ff;
        color: var(--theme-brand6, #1890ff);
      }
    }
    .sider-hide-opinion {
      margin-bottom: 6px;
      .checkbox-height {
        height: 32px;
        line-height: 32px;
      }
      .sider-hide {
        padding-left: 10px;
        height: 32px;
        line-height: 32px;
        width: 100%;
        display: flex;
        .setting-flex {
          margin-left: 8px;
          width: 200px;
        }
      } 
    }
  }
</style>
